import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Article from '@/views/Article.vue'
const router = createRouter({
    history: createWebHistory(),
    scrollBehavior (to, from, savedPosition) {
        // 滚动条的历史位置和新页面位置(平滑的滚动)
        // return savedPosition ?? {top:0,behavior:'smooth'}
        // 滚动到指定元素的位置
        // return savedPosition ?? {el:'.page',top:0,behavior:'smooth'}
        // 每个页面单独定义路由的动画
        const options = {behavior:'smooth'};
        if(to.meta.scroll?.el){
            options.el = to.meta.scroll.el;
        }
        if(to.meta.scroll?.top >= 0){
            options.top = to.meta.scroll.top;
        }
        return new Promise((resolve, reject) => {
            resolve(savedPosition ?? options)
        })
    },
    routes:[
        {path:'/',name: 'home',component: Home,meta:{enterClass:'animate__animated animate__bounceIn',scroll:{el:'#home'}}},
        {path:'/about',name: 'about',component: About,meta:{enterClass:'animate__animated animate__rotateIn'}},
        {path:'/article',name: 'article',component: Article,meta:{scroll:{top:0}}}
    ]
});
export default router;